<template>
  <div class="profit">
    <gltitle
      :titleSize="titleSize"
      :is_mt="is_mt"
      v-if="!$store.state.isApp"
    ></gltitle>
    <div
      :style="{ paddingTop: !$store.state.isApp ? '1.14rem' : '.2rem' }"
    ></div>
    <div class="profit-content">
      <div class="profit-from">
        <div class="profit-select">
          <span class="tips" v-if="productCode == 0">{{ tipmessage1 }}</span>
          <img src="../../assets/images/down.png" alt="" />
          <van-dropdown-menu
            class="select-list"
            :overlay="false"
            active-color="#2A64E4"
          >
            <van-dropdown-item
              v-model="productCode"
              :options="productlist"
              @change="handlerProduct"
            ></van-dropdown-item>
          </van-dropdown-menu>
        </div>


        <ul class="wrap bet">
          <li>
            <p><span class="c-999">{{$t('js.doc1')}}：</span>{{hashRate}} {{hashRateUnit}}</p>
            <p><span class="c-999">{{$t('js.doc2')}}：</span>{{$t('js.doc3')}}</p>
          </li>
          <li>
            <p><span class="c-999">{{$t('js.doc4')}}：</span>{{price}}USDT</p>
            <p><span class="c-999">{{$t('js.doc5')}}：</span>{{outputRate*100}}%</p>
          </li>
        </ul>

        <div class="profit-select">

          <input
            type="text"
            :placeholder="$t('profit.minerweek')"
            v-model="days"
            class="profit-input"
          />
         <div class="profit-bg"></div>
        </div>
        <div class="profit-select">
          <input
            type="text"
            :placeholder="$t('profit.minernumber')"
            v-model="profitMoney"
            @change="handlerNumber"
            onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9] /g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            class="profit-input"
          />
        </div>
        <div class="profit-select">
          <div class="profit-bg"></div>
          <!-- <input
            type="text"
            :placeholder="$t('profit.minerprice')"
            onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9] /g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            v-model="profiRate"
            class="profit-input"
          /> -->
          <span :style="{color:productCode ==0?'#cccccc':''}">{{profiRate}}</span>
        </div>
        <div class="profit-btn">
          <div @click="handlerPay"><span>{{ $t("profit.calculation") }}</span></div>
          <div @click="handlerReset"><span>{{ $t("profit.Recalculation") }}</span></div>
        </div>
      </div>
    </div>
    <div class="profit-content" style="margin-top: 0.2rem">
      <div class="calculation-top" style="padding-top: 0.4rem">
        <img src="../../assets/images/result.png" alt="" /><span>{{
          $t("profit.result")
        }}</span
        ><img src="../../assets/images/result1.png" alt="" />
      </div>
      <div class="pofit-result">
         <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.investment") }}</span>
          </div>
          <div class="item-right cenline" v-show="profitResult.paymentAmount != undefined">
            <span
              >{{ profitResult.paymentAmount }}USDT</span
            >
          </div>
        </div>
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.hours") }}</span>
          </div>
          <div class="item-right" v-show="profitResult.dailyOutputToCoin != undefined">
            <p>{{ profitResult.dailyOutputToCoin }}{{ profitResult.coinName }}</p>
            <p class="colorred">≈{{ profitResult.dailyOutput }}<span>USDT</span></p>
          </div>
        </div>
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.estimateday") }}</span>
          </div>
          <div class="item-right cenline" v-show="profitResult.recoverDays != undefined">
            <span>{{
              $t("profit.iconday", { n1: profitResult.recoverDays })
            }}</span>
          </div>
        </div>
        <div class="profit-result-item">
          <div class="item-left">
            <span>{{ $t("profit.fastestday") }}</span>
          </div>
          <div class="item-right cenline" v-show="profitResult.fastRecoverDays != undefined">
            <span>
              {{
                $t("profit.iconday", { n1: profitResult.fastRecoverDays })
              }}</span
            >
          </div>
        </div>

      </div>
      <div class="profit-pay" @click="handlerOrder">
        {{ $t("profit.pay") }}
      </div>
    </div>
    <div class="profit-tips">
      <div v-html="$t('profit.doc4')"></div>
      <div v-html="$t('profit.doc5')"></div>
      <div v-html="$t('profit.doc6')"></div>
      <div v-html="$t('profit.doc7')"></div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
Vue.use(DropdownMenu).use(DropdownItem);
export default {
  data() {
    return {
      tipmessage1: this.$t("profit.minertype"),
      profitMoney: "",
      profitMoneynum: "",
      profiRate: this.$t('profit.minerprice'),
      titleSize: this.$t("title.minerprofit"),
      is_mt: true,
      productCode: 0,
      productlist: [],
      profitResult: {},
      days: "",
      hashRateUnit:'',
      hashRate:'',
      price:'',
      outputRate:''
    };
  },
  created() {
    this.getType();
  },
  methods: {
    handlerNumber(val) {
      this.profitMoneynum=this.profitMoney;
      this.profitMoney=this.$t('profit.minernum',{n1:this.profitMoney});
    },
    handlerOrder() {
      if (this.productCode == 0) {
        this.$toast(this.tipmessage1);
        return;
      }
      if (this.profitMoney == "") {
        this.$toast(this.$t("profit.minernumber"));
        return;
      }
      if (this.profiRate == "") {
        this.$toast(this.$t("profit.minerprice"));
        return;
      }
      if (this.$store.state.isApp) {
        let appResult = {
          code: this.CMD.app.ORIGINAL_ORDER,
          data: {
            productId: this.productCode,
            quantity: this.profitMoneynum
          },
        };
        this.common.callBackApp(appResult);
        return;
      }
    },
    getType() {
      this.$post(this.URL.financial.minerlist, {}).then((res) => {
        if (res.code == 0) {
          res.data.forEach((e) => {
            e.text = this.$t("profit.minername", {
              n1: e.coinName,
              n2: e.level,
            });
            e.value = e.productId;
          });
          this.productlist = res.data;
          console.log(res.data,'sssss')
        }
      });
    },
    handlerPay() {
      if (this.productCode == 0) {
        this.$toast(this.tipmessage1);
        return;
      }

      if (this.profitMoney == "") {
        this.$toast(this.$t("profit.minernumber"));
        return;
      }
      if (this.profiRate == "") {
        this.$toast(this.$t("profit.minerprice"));
        return;
      }

      let params = {
        productId: this.productCode,
        quantity: this.profitMoneynum,
      };
      this.$post(this.URL.financial.minercalculator, params).then((res) => {
        if (res.code == 0) {
          this.profitResult = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    handlerReset() {
      this.productCode = 0;
      this.profitMoney = "";
      this.profitResult = {};
      this.days = "";
      this.profiRate = "";
      this.hashRateUnit = "";
      this.hashRate = "";
      this.price = "";
      this.outputRate = ""

    },
    handlerProduct(value) {
      this.productlist.forEach((e) => {
        if (e.productId == value) {
             this.profitResult = {};
             this.profitMoney='';
             this.profitMoneynum='';
           this.profiRate=this.$t("profit.minericon", { n1: e.coinPrice,n2:'USDT' })
          this.days = this.$t("profit.minerday", { n1: e.contractDays });
          this.hashRateUnit = e.hashRateUnit;
          this.hashRate = e.hashRate;
          this.price = e.price;
          this.outputRate = e.outputRate
        }
      });
    },
  },
};
</script>
<style lang="less">
.van-dropdown-menu {
  width: 6.1rem;
  margin-left: 0.2rem;
  .van-dropdown-menu__bar {
    height: 0.8rem;
    box-shadow: none;
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
    .van-dropdown-menu__item {
      padding: 0;
      justify-content: left;
      .van-ellipsis {
        font-size: 0.28rem;
        color: #333333;
      }
      .van-dropdown-menu__title {
        padding: 0;
        &::after {
          border: 0;
        }
      }
    }
  }
}
.van-popup--top {
  width: 6.5rem;
  margin: 0.1rem 0 0 0.5rem;
  border-radius: 0.14rem;
  border: 0.01rem solid #dfdfdf;
  .van-cell__title {
    font-size: 0.28rem;
    color: #333;
  }
   .van-cell__value{
            flex:0 0 .5rem;
        }
}
</style>
<style lang="less" scoped>
.profit {
  .profit-content {
    width: 7.1rem;
    margin: 0 auto;
    background: #fff;
    padding: 0 0 0.4rem;
    border-radius: 0.16rem;
    box-shadow: 0px 0 0.1rem 0rem rgba(0, 0, 0, 0.03);
    .profit-from {
      padding: 0.4rem 0.3rem 0;
      .profit-select {
        display: flex;
        position: relative;
        width: 100%;
        height: 0.84rem;
        margin-bottom: 0.2rem;
        border: 0.02rem solid #dfdfdf;
        border-radius: 0.12rem;
        box-sizing: border-box;
        align-items:left;
        justify-content: space-around;
        flex-direction: column;
        span{
          padding: 0 .25rem;
        }
        .profit-bg{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: .84rem;
          z-index: 5;
        }
        .profit-input {
          flex: 1;
          padding: 0 0.25rem;
          height: 0.8rem;
          background: none;
          border: none;
          &::-webkit-input-placeholder {
            font-size: 0.28rem;
            color: #cccccc;
          }
          &:disabled{
            color: #333333;
          }
        }
        img {
          position: absolute;
          top: 0.35rem;
          right: 0.28rem;
          width: 0.24rem;
          height: 0.14rem;
          z-index: 15;
        }
        .tips {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          font-size: 0.28rem;
          color: #cccccc;
          margin-left: 0rem;
          line-height: 0.84rem;
        }
      }
      .profit-btn {
        display: flex;
        margin-top: 0.3rem;
        font-size: 0.3rem;
        flex-direction: row;
        justify-content: space-between;
        div {
          display: flex;
          flex: 0 0 3.15rem;
          height: 0.88rem;
          border: 0.01rem solid #2A64E4;
          text-align: center;
          border-radius: 0.12rem;
          box-sizing: border-box;
         // line-height: 0.84rem;
          color: #2A64E4;
          align-items:center;
          justify-content: space-around;
          flex-direction: column;
          &:last-child {
            background: linear-gradient(-90deg, #053ac2 0%, #2295ed 100%);
            color: #fff;
            border: 0;
          }
        }
      }
    }
    .calculation-top {
      padding-bottom: 0.4rem;
      text-align: center;
      span {
        padding: 0 0.18rem;
        font-size: 0.32rem;
        color: #222222;
        font-weight: 500;
      }
      img {
        width: 0.23rem;
        height: 0.18rem;
        vertical-align: middle;
      }
    }
    .pofit-result {
      padding: 0 0.3rem;
      .profit-result-item {
        display: flex;
        font-size: 0.28rem;
        line-height: .3rem;
        padding: .08rem 0;
        color: #999999;
        .item-left {
          flex: 0 0 2.5rem;
          display: flex;
          align-items: left;
          justify-content: space-around;
          flex-direction: column;
        }
        .item-right {
          flex: 1;
          text-align: right;
          color: #222222;
          line-height: .3rem;

          .colorred {
            color: #e5282c;
            span{
                font-size: .2rem;
            }
          }
        }
        .cenline {
          display: flex;
          align-items: left;
          justify-content: space-around;
          flex-direction: column;
        }
        &:first-child {
          border-top: 0.01rem solid #ededed;
          padding-top: .3rem;
        }
      }
    }
    .profit-pay {
      margin: 0.3rem auto 0;
      width: 6.5rem;
      height: 0.88rem;
      font-size: 0.3rem;
      color: #fff;
      line-height: 0.88rem;
      background: linear-gradient(-90deg, #053ac2 0%, #2295ed 100%);
      border-radius: 0.12rem;
      text-align: center;
    }
  }
  .profit-tips {
    padding: 0.38rem 0.4rem 0.58rem;
    font-size: 0.24rem;
    color: #999999;
    div {
      margin-bottom: 0.1rem;
    }
  }


  .wrap {
    padding-bottom: .3rem;
    p {
      padding: .06rem 0;
      font-size: .26rem;
    }
  }
}
</style>
